import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:myapp07/constants/api_constants.dart';
import 'constants/ui_constants.dart';
import 'package:http/http.dart';

main() {
  var phoneCtrl = TextEditingController(); //用于绑定到“电话”输入框的编辑控制器
  String phone = ''; //电话输入框中的内容
  String pwd = ''; //密码输入框中的内容

  //MaterialApp组件：代表一个符合MaterialDesign风格的应用
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false, //是否在调试模式下显示窗口右上角的提示横栏
      home: Scaffold(
        //首页对应的是一个页面脚手架组件
        backgroundColor: UIConstants.COLOR_PAGE_BG, //页面脚手架指定当前页面背景颜色
        body: Padding(
          padding: EdgeInsets.all(20),
          child: SizedBox(
            //可以指定大小的容器
            width: double.infinity, //宽度为：100%
            height: double.infinity, //高度为：100%
            child: Column(
              //Column容器宽度要靠内容撑起来，高度为100%
              // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(height: 100),
                //F1: LOGO图片
                Image.asset(
                  'assets/img/logo.png',
                  width: 260,
                  height: 260,
                  fit: BoxFit.cover,
                ),

                //F2: 手机号输入框组
                SizedBox(height: 20),
                TextField(
                  controller: phoneCtrl,
                  decoration: InputDecoration(
                    //输入框装饰
                    hintText: '请输入手机号码', //占位用的提示文字
                    hintStyle: TextStyle(color: Colors.black45),
                    // labelText: '手机号'                 //标签文字，类似于占位文字，但不会消失而是移动左上角去
                    // helperText: '请输入'                //输入助手/提示文字
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none, //边框边缘设定
                      borderRadius: BorderRadius.all(
                        Radius.circular(10),
                      ), //边框圆角
                      // gapPadding: 10,      //内边距空缺
                    ),
                    // border: InputBorder.none,       //取消边框，同时取消圆角
                    filled: true, //是否填充颜色
                    fillColor: Color(0xFFF0F0F0), //指定填充颜色（即背景色）
                    // icon: Icon(Icons.phone_android_sharp),  //显示在输入框外部左侧的图标
                    prefixIcon: Icon(
                      //前缀图标
                      Icons.phone_android_sharp,
                      color: UIConstants.COLOR_THEME_GREEN,
                    ),
                    // suffixIcon: Icon(        //Icon不具备“单机事件”处理能力
                    //   Icons.cancel,
                    //   color: UIConstants.COLOR_THEME_BLUE,
                    // ),
                    suffixIcon: IconButton(
                      onPressed: () => phoneCtrl.clear(), //点击x图标按钮后，清空输入框中的内容
                      icon: Icon(
                        Icons.cancel,
                        color: UIConstants.COLOR_THEME_BLUE,
                      ),
                    ),
                  ),
                  onChanged: (val) => phone = val, // 处理“输入框内容改变”事件
                ),

                //F3: 密码输入框组
                SizedBox(height: 20),
                TextField(
                  obscureText: true, //是否隐藏文本（即密码输入）
                  decoration: InputDecoration(
                    //输入框装饰
                    hintText: '请输入登录密码', //占位用的提示文字
                    hintStyle: TextStyle(color: Colors.black45),
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none, //边框边缘设定
                      borderRadius: BorderRadius.all(
                        Radius.circular(10),
                      ), //边框圆角
                    ),
                    filled: true, //是否填充颜色
                    fillColor: Color(0xFFF0F0F0), //指定填充颜色（即背景色）
                    prefixIcon: Icon(
                      //前缀图标
                      Icons.lock,
                      color: UIConstants.COLOR_THEME_GREEN,
                    ),
                    suffixIcon: IconButton(
                      onPressed: () => {}, //TODO: 在睁眼和闭眼间切换
                      icon: Icon(
                        Icons.remove_red_eye_sharp,
                        color: UIConstants.COLOR_THEME_BLUE,
                      ),
                    ),
                  ),
                  onChanged: (val) => pwd = val, // 处理“输入框内容改变”事件
                ),

                //F4: 登录按钮
                SizedBox(height: 30),
                SizedBox(
                  width: double.infinity,
                  height: 50,
                  child: ElevatedButton(
                    onPressed: () async {
                      //① 校验用户名输入是否合法 - AlertDialog
                      //② 校验密码输入是否合法 - AlertDialog
                      //③ 提交输入给服务器端接口，进行服务器端验证
                      var url = APIConstants.userLogin;
                      var res = await post(
                        Uri.parse(url),
                        headers: {'Content-Type': 'application/json'},
                        body: jsonEncode({'phone': phone, 'pwd':pwd})
                      );
                      var body = jsonDecode( res.body );
                      print('登录结果：$body');
                      //登录成功：{code: 2000, msg: login succ, token: xxxxx}
                    },
                    style: ElevatedButton.styleFrom(
                      //提示：此处如果直接使用ButtonStyle类型就非常麻烦了
                      backgroundColor: UIConstants.COLOR_THEME_GREEN,
                    ),
                    child: Text(
                      '登     录',
                      style: TextStyle(color: Colors.white, fontSize: 16),
                    ),
                  ),
                ),
                //F5: 忘记密码
                // Text(          //Text没有“单击事件”处理能力
                //   '忘记密码',
                //   style: TextStyle(color: UIConstants.COLOR_THEME_BLUE),
                // ),
                TextButton(
                  onPressed: () => print('跳转到找回密码页面'),
                  child: Text(
                    '忘记密码',
                    style: TextStyle(color: UIConstants.COLOR_THEME_BLUE),
                  ),
                ),
              ],
            ),
          ),
        ), //内边距为20
      ),
    ),
  );
}
